<template>
  <div>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <el-form-item :label="title" prop="username">
        <el-input v-model.number="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片验证">
        <slide-verify
          ref="slideblock"
          @again="onAgain"
          @success="onSuccess"
          @fulfilled="onFail"
          @fail="onFail"
          @refresh="onFail"
          :slider-text="text"
          :accuracy="accuracy"
        ></slide-verify>
      </el-form-item>
      <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
        记住我
      </el-checkbox>-->
      <el-form-item>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 70%; float: left"
          @click.native.prevent="dataFormSubmit"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-link
          type="primary"
          :underline="false"
          style="margin-left: 10px"
          @click="findPwd()"
        >密码找回 ?</el-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import findpwd from './findpwd.vue';
// import img0 from 'src/assets/images/imgs/001.jpeg'
// import Cookies from 'js-cookie'
export default {
  components: { findpwd },
  name: 'in',
  props: ['urlType', 'title'],
  data() {
    return {
      isfindpwd: false,
      cookiePass: '',
      loading: false,
      loginForm: {
        password: '123456',
        username: '201820205532',
        verification: false,
        rememberMe: false,
      },
      rules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
      },
      text: '向右滑动->',
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 1,
      // imgs:[img0],
      msg: '',
    };
  },

  created() {
    console.log('in++++++++++++++++');
  },
  methods: {
    onSuccess() {
      this.loginForm.verification = true;
    },
    onFail() {
      this.loginForm.verification = false;
    },
    onAgain() {
      alert('检测到非人为操作的哦！');
      this.loginForm.verification = false;
      // 刷新
      // this.$refs.slideblock.reset();
      this.slideblock.reset();
    },

    dataFormSubmit() {
      if (this.loginForm.verification) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            var URLPATH = '';
            if (this.urlType == 'student') {
              URLPATH = '/edu-student/login';
            }
            if (this.urlType == 'teacher') {
              URLPATH = '/edu-teacher/teacherLogin';
            }
            console.log('************登录访问的地址：', URLPATH);
            this.$http({
              url: this.$http.adornUrl(URLPATH),
              method: 'post',
              data: this.$http.adornData(
                {
                  username: this.loginForm.username,
                  pwd: this.loginForm.password,
                },
                false
              ),
            }).then(({ data }) => {
              if (data && data.code === 20000) {
                console.log(data.data.token);
                this.$cookie.set('token', data.data.token); //Bearer
                this.$cookie.set('tokenHead', data.data.tokenHead); //Bearer
                //   this.$cookie.set("token"," data.data.token"); //Bearer
                // this.$cookie.set("tokenHead", "data.data.tokenHead"); //Bearer
                this.$cookie.set('userId', this.loginForm.username);
                this.$cookie.set('userType', this.urlType);
                this.$store.commit('user/updateUserType', this.urlType);
                this.$store.commit('user/updateId', this.loginForm.username);
                // this.$cookie.set("token", "token");

                //根据角色跳转路由
                if (this.$store.state.user.userType == 'teacher') {
                  this.$router.replace({ name: 'course' });
                }
                if (this.$store.state.user.userType == 'student') {
                  this.$router.replace({ name: 'student' });
                }
              } else {
                // this.$refs.slideblock.reset();
                this.$message.error('用户名或密码有误');
              }
            });
          }
        });
      } else {
        this.msg = '请验证图片';
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [h('span', null, this.msg), h('i', { style: 'color: teal' })]),
        });
      }
    },
    /**
     * 密码找回
     */
    findPwd() {
      this.$emit('isfindPwd', true);
    },
  },
};
</script>

<style scoped></style>
